<template>
  <div>
    <!-- 问题描述 -->
    <div class="info">
      <h3>问题描述</h3>
      <ul>
        <li>需要使用的数据在 data.json 文件中</li>
        <li>实现登录、答题功能</li>
      </ul>
      <pre>
        {
        "data": [
          {
            "title": "p标签是干什么用的？",
            "options": [            // 答案选项
              "实现换行的",
              "显示图片的",
              "制作按钮的",
              "实现分段的"
            ],
            "right": 3              // 正确答案下标，从0开始
          },
          ...
        }
      </pre>
      <h3>得分说明：总分：40分</h3>
      <ul>
        <li>登录、退出状态的切换：10 分</li>
        <li>用户名 6~18 位规则的验证：10 分</li>
        <li>提交答案能够判断对错：10 分</li>
        <li>实现 3 秒切换的动画效果：10 分</li>
      </ul>
    </div>

    <!-- 效果演示 -->
    <div class="ti-container">
      <!-- 登录 -->
      <div class="ti-login">
        <div>
          用户名：<strong>{{username}}</strong>
          <input
          v-if="username === ''"
          :class="{error: errorMessage !== ''}"
          type="text"
          v-model.trim="inputValue" />
          <span v-if="errorMessage !== ''" class="error-txt">{{errorMessage}}</span>
        </div>
        <br>
        <div>
          <button v-if="username==''" @click="login">登录</button>
          <button v-else @click="username=''">退出</button>
        </div>
      </div>

      <!-- 答题 -->
      <div class="ti-list">
        <div class="mask" v-if="username==''"></div>

        <!-- 题 -->
        <div v-if="current < ti.length">
          <h3>{{ti[current].title}}</h3>
          <ul>
            <li v-for="(i,k) in ti[current].options" :key="k">
              <input name="ti" type="radio" :value="k" v-model="pickValue" />
              {{i}}
            </li>
          </ul>
          <div>
            <button :disabled="buttonTxt !== '提交答案'" @click="submit">
              {{buttonTxt}}
            </button>
            <div v-if="seconds>=0">{{seconds}}s后进入下一题</div>
          </div>
        </div>
        <div v-else>
          没有了。<button @click="reset">重做一遍</button>
        </div>
        <div class="bottom">
          共有 {{current+1}}/{{ti.length}} 道题，
          答对：{{right_count}}
          答错：{{error_count}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import data from './data'
export default {
  data () {
    return {
      buttonTxt: '提交答案',
      seconds: -1,
      ti: data.data,
      current: 0,
      username: 'abcqwe',
      inputValue: '',
      errorMessage: '',
      right_count: 0,
      error_count: 0,
      pickValue: -1
    }
  },
  methods: {
    login () {
      if (!/^\w{6,18}$/.test(this.inputValue)) {
        this.errorMessage = '用户名必须是6~18位数字、字母、下划线。'
      } else {
        this.username = this.inputValue
        this.errorMessage = ''
        this.inputValue = ''
        this.reset()
      }
    },
    submit () {
      if (this.pickValue === -1) {
        alert('必须选择一项')
        return
      }
      if (this.pickValue === this.ti[this.current].right) {
        this.doRight()
      } else {
        this.doWrong()
      }
      this.pickValue = -1
      this.startTimer()
    },
    startTimer () {
      this.seconds = 3
      const si = setInterval(() => {
        if (this.seconds <= 0) {
          clearInterval(si)
          this.current++
          this.buttonTxt = '提交答案'
        }
        this.seconds--
      }, 1000)
    },
    doRight () {
      this.right_count++
      this.buttonTxt = '回答正确'
    },
    doWrong () {
      this.error_count++
      this.buttonTxt = '回答错误'
    },
    reset () {
      this.right_count = 0
      this.error_count = 0
      this.current = 0
    }
  }
}
</script>

<style scoped>
  .ti-container {
    width: 100%;
    min-height: 300px;
    display: flex;
    justify-content: center;
  }
  .ti-login, .ti-list {
    border: 1px solid #ccc;
    padding: 5px;
    transition: all 3s;
  }
  .ti-login {
    width: 40%;
  }
  .ti-list {
    width: 60%;
    position: relative;
  }
  .ti-list .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .9);
  }
  .ti-list .bottom {
    position: absolute;
    bottom: 0;
    padding: 5px;
  }
  .error {
    border: 1px solid #f00;
  }
  .error, .error-txt {
    color: #f00;
  }
  ul {
    list-style: none;
  }
</style>
